<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="/html/layui/css/layui.css">
</head>
<style>
    #colcse li a:hover{background:#009688;color:#fff;}
</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo" >layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd>
                <a data-url="a" data-id="99" data-title="列表一" href="#" class="site-demo-active"    data-type="ltabAdd">列表一</a>
            </dd>
            <dd>
                <a data-url="a"  data-id="88" data-title="列表二" href="#" class="site-demo-active"    data-type="ltabAdd">列表二</a>
            </dd>
            <dd>
                <a data-url="a" data-id="77" data-title="列表三" href="#" class="site-demo-active"    data-type="ltabAdd">列表三</a>
            </dd>
            <dd>
                <a data-url="a" data-id="66" data-title="列表四" href="#" class="site-demo-active" data-type="ltabAdd">列表四</a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item ">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body" style="background-color: #FFFCF5;">
    <!-- 内容主体区域 -->
    <div>

 <div id="colcse" class="layui-tab" lay-filter="demo" lay-allowclose="true" >
                <ul class="layui-tab-title">
                    <!--
                        作者：1669056669@qq.com
                        时间：2018-12-24
                        描述：存放tab
                    -->
                </ul>
                <!--
                    作者：1669056669@qq.com
                    时间：2018-12-24
                    描述：tab右键功能
                -->
                <ul class="rightmenu" style=" display: none;position: absolute;background: #6E6C79;font-family: '微软雅黑';">
                    <li id="yue" style="color: red;cursor:pointer;" data-id="" data-type="closethis">
                         <a href="#" id="colcse" style="color: white;cursor:pointer;"  data-type="closethis"  >     关闭当前  </a>
                        </li>

                    <li data-type="closeall">
                        <a href="#" id="colcse" style="color: white;cursor:pointer;" data-id=""  data-type="closeall">  关闭所有  </a>
                    </li>

                    <li data-type="closeothe">
                        <a href="#" id="colcse" style="color: white;cursor:pointer;" data-id=""  data-type="closeothe">  关闭其它  </a>
                    </li>
                </ul>
                <div class="layui-tab-content">
                </div>
            </div>

    </div>
  </div>

      <div id="test1" data-id = "test" class="layui-panel-window">
          <input class="layui-table-box" title="9999999" />
      </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    ©layui - 底部固定区域
  </div>

</div>
<script src="/html/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

var ids=0;
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabDelete: function(id){
      //删除指定Tab项

      element.tabDelete('demo', id); //删除：“商品管理”
      ids=0;
      //othis.addClass('layui-btn-disabled'); 添加样式
    },tabDeleteAll: function(idss){
        $.each(idss, function(i,item) {
             element.tabDelete('demo', item); //删除所有
        });
        ids =0;
    }
    ,tabChange: function(id){
      //切换到指定Tab项
      element.tabChange('demo', id); //切换到：用户管理
    },ltabAdd:function(url,id,name){
                  //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                    //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                    element.tabAdd('demo', {
                        title: name,
                        content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:99%;"></iframe>',
                        id: id //规定好的id
                    })
                     CustomRightClick(id); //给tab绑定右击事件
                     FrameWH();  //计算ifram层的大小

    }
  };

    //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
            $('.site-demo-active').on('click', function() {
                var dataid = $(this);
                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在

                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));
            });
  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);

  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });

    function FrameWH() {
                var h = $(window).height() -41- 10 - 60 -10-44 -10;
                $("iframe").css("height",h+"px");
            }

            $(window).resize(function () {
                FrameWH();
            })


            function CustomRightClick(id) {
                //取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
                $('.layui-tab-title li').on('contextmenu', function () { return false; })
                $('.layui-tab-title,.layui-tab-title li').click(function () {
                    $('.rightmenu').hide();
                    ids=0;
                });

                //桌面点击右击
                $('.layui-tab-title li').on('contextmenu', function (e) {

                    var popupmenu = $(".rightmenu");
                    ids +=1;
                    if(ids >1){
                        return true;
                    }
                    popupmenu.find("li").attr("data-id",id); //在右键菜单中的标签绑定id属性

                    //判断右侧菜单的位置
                    l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                    t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;

                    popupmenu.css({ left: l-190, top: t-50 }).show(); //进行绝对定位
                    //alert("右键菜单")
                    return false;
                });
            }
              $(".rightmenu li").click(function () {
                //右键菜单中的选项被点击之后，判断type的类型，决定关闭所有还是关闭当前。
                if ($(this).attr("data-type") == "closethis") {
                    //如果关闭当前，即根据显示右键菜单时所绑定的id，执行tabDelete

                    active.tabDelete($(this).attr("data-id"));
                } else if ($(this).attr("data-type") == "closeall") {
                    var tabtitle = $(".layui-tab-title li");
                    var ids = new Array();
                    $.each(tabtitle, function (i) {
                        ids[i] = $(this).attr("lay-id");
                    })
                    //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
                    active.tabDeleteAll(ids);
                }else if($(this).attr("data-type") =="closeothe"){
                        var id =$(this).attr("data-id");
                        var tabtitle = $(".layui-tab-title li");
                    var ids = new Array();
                    $.each(tabtitle, function (i) {
                        if(id != $(this).attr("lay-id")){
                        ids[i] = $(this).attr("lay-id");
                       }
                    })
                    active.tabDeleteAll(ids);
                }

                $('.rightmenu').hide(); //最后再隐藏右键菜单
            })

});
</script>
</body>
</html>